<!DOCTYPE html>
<html lang="zn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>张张的网站</title>
    <link rel="icon" href="40.jpg" type="40.jpg" />
    <meta name="author" content="张昕瑶" />
    <meta name="keywords" content="个人作品集, 个人网站, 作品集, 设计作品集, UX/UI, 交互作品, 设计师网站">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div id="view">
        <div id="frame">
            <header class="jq22-header">
                <div id="text" class="kaitoudonghua" contenteditable>
                    <audio src="刘思鉴 - 月台（I'm Here）.mp3" controls="controls" autoplay>
                </audio>:)欢迎来到我的小世界<br>你可以在这一页随便写点什么呀</div>
                <div id="text" class="kaitoudonghua1" contenteditable></div>
                <script>
                    let text = document.getElementById('text')
                    let shadow = ''
                    for (let i = 0; i < 50; i++) {
                        shadow += (shadow ? ',' : '') + '${i*1}px ${i*1}px 0px #da898b'
                    }
                    text.style.textShadow = shadow
                </script>
            </header>
            <div class="op-section second"><img class="img1" src="1.jpg" alt="">

                <div>
                    <a class="a" href="https://zhang-zhangxy.gitee.io/webpage">This is my website</a>
                    <a class="maodian1" href=" https://zhang-zhangxy.gitee.io/or-connection">&ensp;个人简介&ensp;</a><br>
                    <a class="maodian2" href="https://zhang-zhangxy.gitee.io/or-connection">&ensp;VIDEO&ensp;</a><br>
                    <a class="maodian3" href="https://zhang-zhangxy.gitee.io/or-connection">&ensp;作品集&ensp;</a><br>
                    <a class="maodian4" href=" https://zhang-zhangxy.gitee.io/link"> &ensp;联系方式&ensp;</a><br></div>
            </div>
            <div class="op-section third">
                <span style="--i:1;">PERSONAL-File</span>
                <img class="img2" src="2.jpg" alt=""><img class="img3" src="3.jpg" alt="">
                <a class="a1">张昕瑶<br>Zhang Xinyao</a><a class="a2">Hello!</a><a class="a3">nice to meet U</a>
                <div class="box1"></div>
                <a class="a4">先介绍一下我自己吧，可以叫我张张，我是零一年的小双鱼嗷。<br><br>至于爱好嘛，我喜欢的东西很多，喜欢吃，喜欢玩游戏，喜欢旅行，喜欢画画，喜欢可爱的小猫小狗，喜欢各种各样奇奇怪怪的可爱的小东西...还有好多好多。<br><br>如果感兴趣的话，就看看下面的这个视频叭</a>
                <!-- <hr>
                <hr>
                <div class="box2"></div> -->
            </div>
            <div class="op-section fourth">
                <!-- <video class="videoone" src="QQ视频.mp4" width="800px" controls id="VIDEO"> </video></div> -->
                <iframe class="videoone" style='width: 1200px;height: 676px' frameborder='no' allowfullscreen mozallowfullscreen webkitallowfullscreen src='http://go.plvideo.cn/front/video/preview?vid=675d9da049a462c252ca3d636451787f_6'></iframe>
                <div class="op-section fifth">
                    <span style="--i:1;" id="zuopinji">插画<br>Illustrated</span>


                    <div class="box3">
                        <div class="swiper">
                            <input type="radio" name="btn" id="btn1" checked>
                            <input type="radio" name="btn" id="btn2">
                            <input type="radio" name="btn" id="btn3">
                            <input type="radio" name="btn" id="btn4">
                            <input type="radio" name="btn" id="btn5">
                            <input type="radio" name="btn" id="btn6">
                            <input type="radio" name="btn" id="btn7">
                            <!-- <input type="radio" name="btn" id="btn8">
                            <input type="radio" name="btn" id="btn9">
                            <input type="radio" name="btn" id="btn10">
                            <input type="radio" name="btn" id="btn11">
                            <input type="radio" name="btn" id="btn12">
                            <input type="radio" name="btn" id="btn13">
                            <input type="radio" name="btn" id="btn14">
                            <input type="radio" name="btn" id="btn15">
                            <input type="radio" name="btn" id="btn16">
                            <input type="radio" name="btn" id="btn17">
                            <input type="radio" name="btn" id="btn18">
                            <input type="radio" name="btn" id="btn19"> -->
                            <label for="btn1"></label>
                            <label for="btn2"></label>
                            <label for="btn3"></label>
                            <label for="btn4"></label>
                            <label for="btn5"></label>
                            <label for="btn6"></label>
                            <label for="btn7"></label>
                            <!-- <label for="btn8"></label>
                            <label for="btn9"></label>
                            <label for="btn10"></label>
                            <label for="btn11"></label>
                            <label for="btn12"></label>
                            <label for="btn13"></label>
                            <label for="btn14"></label>
                            <label for="btn15"></label>
                            <label for="btn16"></label>
                            <label for="btn17"></label>
                            <label for="btn18"></label>
                            <label for="btn19"></label> -->

                            <ul>
                                <li><img class="img4" src="4.jpg" alt="">
                                    <li><img class="img5" src="5.jpg" alt="">
                                        <li><img class="img6" src="6.jpg" alt="">
                                            <li><img class="img7" src="7.jpg" alt="">
                                                <li><img class="img8" src="8.jpg" alt="">
                                                    <li><img class="img9" src="9.jpg" a9lt="">
                                                        <li><img class="img10" src="10.jpg" alt="">
                                                            <li><img class="img11" src="11.jpg" alt="">
                                                                <li><img class="img12" src="12.jpg" alt="">
                                                                    <li><img class="img13" src="13.jpg" alt="">
                                                                        <li><img class="img14" src="14.jpg" alt="">
                                                                            <li><img class="img15" src="15.jpg" alt="">
                                                                                <li><img class="img16" src="16.jpg" alt="">
                                                                                    <li><img class="img17" src="17.jpg" alt="">
                                                                                        <li><img class="img18" src="18.jpg" alt="">
                                                                                            <li><img class="img19" src="19.jpg" alt="">
                                                                                                <li><img class="img20" src="20.jpg" alt="">
                                                                                                    <li><img class="img21" src="21.jpg" alt="">
                                                                                                        <li><img class="img22" src="22.jpg" alt="">
                            </ul>
                        </div>
                    </div>

                    <div class="op-section last">
                        <span style="--i:1;" id="zuopinji">版式设计<br>Page Layout</span>
                        <div class="box4">
                            <div class="swiper">
                                <input type="radio" name="btn" id="btn9" checked>
                                <input type="radio" name="btn" id="btn10">
                                <input type="radio" name="btn" id="btn11">
                                <input type="radio" name="btn" id="btn12">
                                <input type="radio" name="btn" id="btn13">
                                <input type="radio" name="btn" id="btn14">
                                <input type="radio" name="btn" id="btn15">
                                <!-- <input type="radio" name="btn" id="btn8">
                                <input type="radio" name="btn" id="btn9">
                                <input type="radio" name="btn" id="btn10">
                                <input type="radio" name="btn" id="btn11">
                                <input type="radio" name="btn" id="btn12">
                                <input type="radio" name="btn" id="btn13">
                                <input type="radio" name="btn" id="btn14">
                                <input type="radio" name="btn" id="btn15">
                                <input type="radio" name="btn" id="btn16">
                                <input type="radio" name="btn" id="btn17">
                                <input type="radio" name="btn" id="btn18">
                                <input type="radio" name="btn" id="btn19"> -->
                                <label for="btn9"></label>
                                <label for="btn10"></label>
                                <label for="btn11"></label>
                                <label for="btn12"></label>
                                <label for="btn13"></label>
                                <label for="btn14"></label>
                                <label for="btn15"></label>
                                <!-- <label for="btn8"></label>
                                <label for="btn9"></label>
                                <label for="btn10"></label>
                                <label for="btn11"></label>
                                <label for="btn12"></label>
                                <label for="btn13"></label>
                                <label for="btn14"></label>
                                <label for="btn15"></label>
                                <label for="btn16"></label>
                                <label for="btn17"></label>
                                <label for="btn18"></label>
                                <label for="btn19"></label> -->

                                <ul>
                                    <li><img class="img30" src="30.jpg" alt="">
                                        <li><img class="img31" src="31.jpg" alt="">
                                            <li><img class="img32" src="32.jpg" alt="">
                                                <li><img class="img33" src="33.jpg" alt="">
                                                    <li><img class="img34" src="34.jpg" alt="">
                                                        <li><img class="img35" src="35.jpg" alt="">
                                                            <li><img class="img36" src="36.jpg" alt="">

                                </ul>
                            </div>



                        </div>
                    </div>
                    <div class="op-section seventh"></div>
                    <span style="--i:1;" id="lianxifangshi">联系方式<br>Contact information</span>
                    <div class="box5">
                        <li>
                            <a href=" https://zhang-zhangxy.gitee.io/attached-website"><img class="img24" src="24.png" alt=""></a>
                        </li>
                        <li>
                            <a href="https://zhang-zhangxy.gitee.io/additional-site-2"><img class="img25" src="25.png" alt=""></a>
                        </li>
                        <li>
                            <a href="https://zhang-zhangxy.gitee.io/additional-site-2"><img class="img26" src="26.png" alt=""></a>
                        </li>
                        <li>
                            <a href="https://zhang-zhangxy.gitee.io/additional-site-2"><img class="img27" src="27.png" alt=""></a>
                        </li>
                    </div>
                </div>
            </div>




            <div id="radioWrap">
                <ul id="radio">
                    <li class="li1"></li>
                    <li class="li2"></li>
                    <li class="li3"></li>
                    <li class="li4"></li>
                    <li class="li5"></li>
                    <li class="li6"></li>
                </ul>
                <span id="radioOn"></span>
            </div>

            <script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>
            <script>
                window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')
            </script>
            <script src="js/onepage.js"></script>
            <script>
                $(document).ready(function() {
                    startOnePage({
                        frame: "#view",
                        container: "#frame",
                        sections: ".op-section",
                        radio: "#radio",
                        radioOn: "#radioOn",
                        speed: 500,
                        easing: "swing"
                    });
                });
            </script>













            <div class="daohang">
                <li>
                    <a href="https://zhang-zhangxy.gitee.io/colored-eggs"><img class="img28" src="28.png" alt=""></a>
                    <a href="https://zhang-zhangxy.gitee.io/attached-website"><img class="img29" src="24.png" alt=""></a>
                    <a href="https://zhang-zhangxy.gitee.io/additional-site-2"><img class="img37" src="25.png"></a>
            </div>
            <div class="head">



                <div class="one">



                </div>
                <div class="two" id="gerenjianjie">

                    <div class="three"></div>

                    <div class="four">




                        <div class="five">




                            <a class="a5"></a>
                            <div class="six">

                            </div>
                        </div>
                    </div>
</body>

</html>